<template>
  <div class="wrap shop_car" v-if="userCar">
    <!-- todo 头部 -->
    <header class="wrap">
      <a @click="$router.back()" class="left"></a>
      <p>购物车（{{ userCar.length }}）</p>
      <div class="right" @click="isClear = !isClear">
        {{ isClear ? "完成" : "编辑" }}
      </div>
    </header>
    <!-- todo 头部 -->

    <!-- todo 购物车 -->
    <main v-show="userCar.length == 0">
      <div class="content">
        <div class="left"></div>
        <div class="right">
          <div class="text">购物车还是空的哦</div>
          <router-link to="/shopList" href="" class="btn">去逛逛</router-link>
        </div>
      </div>
    </main>
    <!-- todo 购物车 -->

    <!-- 商品列表 -->
    <div class="shopList" v-show="!userCar.length == 0">
      <div class="item" v-for="(vl, i) in userCar" :key="i">
        <!-- 单选框 -->
        <div :class="['toggle', { con: vl.checked }]" @click="toggle(i)"></div>

        <!-- 图片 -->
        <router-link tag="div" :to="'/details?id=' + vl.id" class="img">
          <img :src="vl.imgUrl" alt="" />
        </router-link>

        <!-- 文本 -->
        <router-link tag="div" :to="'/details?id=' + vl.id" class="text">
          <div class="title">
            {{ vl.title }}
          </div>
          <div class="info">{{ vl.type }}；{{ vl.size }}</div>
          <div class="price">￥ {{ vl.price }}.00</div>
        </router-link>

        <!-- 数量 -->
        <div class="computed">
          <div class="reduce" @click="reduce(i)">-</div>
          <div class="num">{{ vl.toggleNum }}</div>
          <div class="add" @click="add(i)">+</div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->

    <!-- 底部结算 -->
    <div class="all" v-show="userCar.length">
      <!-- 全选按钮 -->
      <div :class="['toggleAll', { con: toggleAll }]" @click="checkAll"></div>
      <span>全选</span>

      <div class="text">
        <!-- 已选择的数量 -->
        <div class="toggle_num" v-show="!isClear">
          已选{{ numCheckedAll }}件
        </div>
        <div class="toggle_num" v-show="isClear">
          已选{{ typeCheckedAll }}件
        </div>

        <!-- 总价格 -->
        <div class="allPrice" v-show="!isClear">合计：￥{{ priceAll }}.00</div>
      </div>

      <!-- 跳转结账页面 -->
      <div class="Closing" v-show="!isClear" @click="buy">去结账</div>
      <div class="clear" v-show="isClear" @click="clear">清除已选</div>
    </div>
    <!-- 底部结算 -->

    <!-- todo 为你推荐 -->
    <section class="foryou">
      <div class="line"></div>
      <p class="text">为你推荐</p>
    </section>
    <!-- todo 为你推荐 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      listAll: null, //所有商品数据
      userCar: null, //购物车数据
      isClear: false,
      UserInfo: null,
    };
  },

  methods: {
    // 修改数据
    setItem(item, newItem) {
      sessionStorage.setItem(item, JSON.stringify(newItem));
    },
    // 获取用户数据
    getUserInfoFun() {
      this.UserInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      let user = localStorage.getItem("HL_user");
      this.userCar = this.UserInfo[user].car;
    },
    // 所有商品信息
    getShopListFun() {
      this.listAll = JSON.parse(sessionStorage.getItem("shopList"));
    },
    // 单选
    toggle(i) {
      this.userCar[i].checked = !this.userCar[i].checked;
      this.setItem("userInfo", this.UserInfo);
    },
    // 全选按钮
    checkAll() {
      this.toggleAll = !this.toggleAll;
      this.setItem("userInfo", this.UserInfo);
    },
    // 减少
    reduce(i) {
      if (this.userCar[i].toggleNum > 1) {
        this.userCar[i].toggleNum -= 1;
      }
      this.setItem("userInfo", this.UserInfo);
    },
    // 添加
    add(i) {
      if (
        this.userCar[i].num > this.userCar[i].toggleNum &&
        this.userCar[i].toggleNum > 0
      ) {
        this.userCar[i].toggleNum += 1;
        this.setItem("userInfo", this.UserInfo);
      } else {
        this.$toast({
          message: "库存不足",
          position: "bottom",
        });
      }
    },
    // 清除已选
    clear() {
      let user = localStorage.getItem("HL_user");
      this.UserInfo[user].car = this.UserInfo[user].car.filter(
        (vl) => !vl.checked
      );
      this.userCar = this.UserInfo[user].car;
      this.setItem("userInfo", this.UserInfo);
    },
    // 结账
    buy() {
      let checkedShop = this.userCar.filter((vl) => vl.checked);
      let infoList = [];
      checkedShop.forEach((vl) => {
        let id = vl.id;
        let num = vl.toggleNum;
        let size = vl.size;
        let type = vl.type;

        infoList.push({
          id,
          num,
          size,
          type,
        });
      });

      this.$router.push({
        path: "/confirmOrder",
        query: {
          infoList: JSON.stringify(infoList),
        },
      });
    },
  },

  created() {
    this.getShopListFun();
    this.getUserInfoFun();
    this.$emit("show");
  },
  computed: {
    // 全选按钮
    toggleAll: {
      get() {
        return this.userCar.every((i) => i.checked);
      },
      set(vl) {
        this.userCar.forEach((i) => (i.checked = vl));
      },
    },
    // 已选总价
    priceAll() {
      var sum = 0;
      this.userCar.forEach((vl) => {
        sum += vl.checked ? vl.toggleNum * vl.price : 0;
      });

      return sum;
    },
    // 已选商品总数量
    numCheckedAll() {
      return this.userCar.reduce((total, vl) => {
        if (vl.checked) {
          return (total += vl.toggleNum);
        } else {
          return total;
        }
      }, 0);
    },
    // 已选商品类型数量
    typeCheckedAll() {
      return this.userCar.reduce((total, vl) => {
        if (vl.checked) {
          return (total += 1);
        } else {
          return total;
        }
      }, 0);
    },
  },
};
</script>

<style lang="scss" scoped>
.shop_car {
  padding-bottom: 150px;

  header {
    > .right {
      position: absolute;
      font-size: 12px;
      top: 0;
      right: 22px;
    }
  }

  main {
    background: #fafafc;
    display: flex;
    justify-content: center;
    height: 137px;

    > .content {
      width: 228px;
      height: 100%;
      display: flex;

      > .left {
        width: 48%;
        background: url(../assets/imgs/no_shop_cart.png) center no-repeat;
        background-size: contain;
      }

      > .right {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        align-content: center;

        > .text {
          width: 100%;
          font-size: 14px;
          color: #907260;
          margin-bottom: 10px;
        }

        > .btn {
          width: 80px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          color: #fff;
          background: #d3c0a4;
          border-radius: 4px;
          font-size: 14px;
        }
      }
    }
  }

  .shopList {
    > .item {
      display: flex;
      align-items: center;
      padding: 10px;

      > .toggle {
        width: 18px;
        height: 18px;
        background: url(http://www.hlamall.cn/img/mobile-site/shopingCart/pay-state.png)
          no-repeat -18px 0px;
        background-size: cover;

        &.con {
          background-position: 0 0;
        }
      }

      > .img {
        margin-left: 12px;
        width: 60px;
        align-self: start;

        > img {
          width: 100%;
        }
      }

      > .text {
        flex: 1;
        height: 100%;
        margin-left: 10px;
        align-self: start;
        font-size: 12px;
        line-height: 16px;

        > .info {
          font-size: 10px;
        }

        > .price {
          font-size: 10px;
          color: #c02d33;
        }
      }

      > .computed {
        width: 88px;
        margin-left: 12px;
        display: flex;
        align-items: center;
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;

        > div {
          height: 25px;
          line-height: 25px;
          text-align: center;

          &.add {
            width: 25px;
            background: #f9f9f9;
            border-right: 1px solid #ccc;
          }
          &.reduce {
            width: 25px;
            background: #f9f9f9;
            border-left: 1px solid #ccc;
          }

          &.num {
            flex: 1;
            border-left: 1px solid #ccc;
            border-right: 1px solid #ccc;
          }
        }
      }
    }
  }

  .foryou {
    height: 80px;
    position: relative;

    > .text {
      color: #666;
      width: 80px;
      text-align: center;
      box-sizing: border-box;
      padding: 0 10px;
      z-index: 10;
      height: 14px;
      line-height: 14px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      font-size: 14px;
      background: #fff;
    }

    > .line {
      width: 150px;
      height: 1px;
      position: absolute;
      background: #c5c5c5;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      margin: auto;
    }
  }

  .all {
    position: fixed;
    z-index: 100;
    background: #fff;
    align-items: center;
    width: 100%;
    height: 49px;
    line-height: 49px;
    bottom: 65px;
    display: flex;
    border-top: 1px solid #e3e3e3;
    font-size: 12px;

    > .toggleAll {
      width: 18px;
      height: 18px;
      background: url(http://www.hlamall.cn/img/mobile-site/shopingCart/pay-state.png)
        no-repeat -18px 0;
      background-size: cover;
      margin-left: 10px;

      &.con {
        background-position: 0 0;
      }
    }

    > span {
      margin-left: 8px;
    }

    > .text {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      > .allPrice {
        margin-left: 15px;
      }
    }

    > .clear,
    > .Closing {
      margin-left: 10px;
      width: 105px;
      text-align: center;
      color: #fff;
      background: #b40510;
    }
  }
}
</style>